<template>
  <div class="leaderboard">
    <h2>排行榜</h2>
    <ul class="title">
      <li>
        排名
      </li>
      <li>
        头像
      </li>
      <li>
        昵称
      </li>
      <li>
        积分
      </li>
    </ul>
    <ul class="leaderboard-information">
      <li>No.1</li>
      <li>
        <img src="/static/img/me.png">
      </li>
      <li>排行榜排行榜排行榜</li>
      <li>236541</li>
    </ul>
    <ul class="leaderboard-information">
      <li>No.1</li>
      <li>
        <img src="/static/img/me.png">
      </li>
      <li>排行榜排行榜</li>
      <li>236541</li>
    </ul>
    <ul class="leaderboard-information">
      <li>No.1</li>
      <li>
        <img src="/static/img/me.png">
      </li>
      <li>排行榜排行榜</li>
      <li>6541</li>
    </ul>
    <a href="/pages/noPublic/main" class="nav-nopublic">点击关注得十次博饼机会</a>
    <navigation :displayCondition="leaderboardData"></navigation>
  </div>
</template>

<script>
import navigation from '../../components/navigation'
export default {
  data () {
    return {
      leaderboardData: 'leaderboard'
    }
  },
  components: {
    navigation
  },
}
</script>

<style scoped>
.leaderboard {
  display: flex;
  flex-direction: column;
}

.leaderboard h2 {
  margin: 0 auto;
  font-size: 20px;
  color: #000;
  font-weight: 900;
  background-color: #FC0;
  border-radius: 10px;
  width: 280rpx;
  text-align: center;
  height: 60rpx;
  line-height: 60rpx;
  margin-top: 10rpx;
  Letter-spacing: 15rpx;
}

.leaderboard .title {
  display: flex;
  width: 100%;
  font-size: 16px;
  width: 710rpx;
  margin: 0 auto;
  background-color: #EA5149;
  border-radius: 50px;
  margin-top: 20rpx;
}

.leaderboard .title li:nth-child(1) {
  flex:1;
  text-align: center;
}
.leaderboard .title li:nth-child(2) {
  flex:1;
  text-align: center;
}
.leaderboard .title li:nth-child(3) {
  flex:2;
  text-align: center;
}
.leaderboard .title li:nth-child(4) {
  flex:1;
  text-align: center;
}
.leaderboard .leaderboard-information {
  display: flex;
  width: 100%;
  font-size: 16px;
  width: 710rpx;
  margin: 10rpx auto;
  height: 70rpx;
  line-height: 70rpx;
  border: 1px #000 solid;
  border-radius: 50px;
}
.leaderboard .leaderboard-information li {
  vertical-align: middle;
}
.leaderboard .leaderboard-information li:nth-child(1) {
  margin-left: 35rpx;
}
.leaderboard .leaderboard-information li:nth-child(2) {
  margin-left: 76rpx;
}
.leaderboard .leaderboard-information li:nth-child(3) {
  margin-left: 20rpx;
  width: 288rpx;
  text-align: center;
  overflow: hidden;
}
.leaderboard .leaderboard-information li:nth-child(4) {
  margin-left: 30rpx;
  width: 110rpx;
  text-align: center;
}
.leaderboard .leaderboard-information li img {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
}

.leaderboard .nav-nopublic {
  width: 360rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #EA5149;
  border-radius: 30px;
  margin: 10rpx auto;
  font-size: 14px;
  font-weight: 900;
  color: #fff;
}
</style>
